<!--
 * @Author: cl
 * @Description: 
 * @Date: 2022-10-26 11:43:09
 * @LastEditTime: 2023-08-03 10:03:31
 * @FilePath: \vue3\src\views\vue3Study\loading.vue
-->
<template>
    <div>
        <div class="myclass" @click="toAddOriginal">original:{{ original.count }}</div>
        <div class="myclass" @click="toAddCopy">copy:{{ copy.count }}</div>
        <div class="myclass">plusOne:{{ plusOne }}</div>
        <!-- <viewer>
            <img src="../../assets/bizhi2.jpg">
        </viewer> -->
    </div>
</template>

<script setup>
import { reactive, useCssModule, ref, readonly, watch, computed } from 'vue'

let loading = ref(false)
let cssLocal = useCssModule('xiaoli')
console.log(cssLocal)


let mytheme = reactive({
    bindColor: 'red'
})

let changeColor = () => {
    if ('green' == mytheme.bindColor) {
        mytheme.bindColor = 'blue'
    } else {
        mytheme.bindColor = 'green'
    }
    console.log(mytheme.bindColor)
}

let myColor = ref('pink')
let changeMyColor = () => {
    if ('green' == myColor.value) {
        myColor.value = 'blue'
    } else {
        myColor.value = 'green'
    }
    console.log(myColor.value)
}

const original = reactive({ count: 0 })
const copy = readonly(original)
watch(original, () => {
    // 用来做响应性追踪
    console.log(copy.count)
})
const plusOne = computed(() => original.count + 1)
let toAddOriginal = () => {
    // 更改源属性会触发其依赖的侦听器
    original.count++
}
let toAddCopy = () => {
    // 更改该只读副本将会失败，并会得到一个警告
    copy.count++ // warning!
}
</script>
<style lang="scss" scoped>
.myclass {
    color: blue
}

.mytheme {
    color: v-bind('mytheme.bindColor');
}

.vbindcss {
    color: v-bind('myColor');
}

.el-loading-spinner .circular {
    animation: loading-rotate 2s linear infinite;
    display: none;
}

.el-loading-spinner {
    /* 图片替换为你自定义的即可 */
    background: url('../../assets/loading.gif') no-repeat;
    width: 100%;
    height: 100%;
    position: relative;
    left: 50%;
    top: 50%;
    transition: translate(-50%, -50%);
}

.my-body {
    width: 100%;
    height: 80vh;
}

.el-main {
    width: 100%;
    height: 100%;
    padding: 0px;
}
</style>
<style module="xiaoli" lang="scss">
.myclass {
    color: red
}
</style>

